<script setup>
import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref} from "vue";

const count = ref(1)
//挂载
onBeforeMount(()=>{
console.log("挂载前：count"+count.value);
console.log("挂载前："+document.getElementById("btn01"))
})
onMounted(()=>{
  console.log("挂载完成：count"+count.value);
  console.log("挂载完成："+document.getElementById("btn01"))
})
//更新
onBeforeUpdate(()=>{
  console.log("更新前：count"+count.value);
  console.log("更新前："+document.getElementById("btn01"))
})
onUpdated(()=>{
  console.log("更新完成：count"+count.value);
  console.log("更新完成："+document.getElementById("btn01"))
})

</script>

<template>
<button id="btn01" @click="count++">点{{count}}</button>
</template>

<style scoped>

</style>